//---------------------------
// Typography
//---------------------------


body {
  font-family: $font__serif;
  font-size: $font-size__base;
  font-weight: $font-weight__light;
  color: var(--content__color);
  text-align: left;
  background-color: var(--background__color);
  text-rendering: optimizeLegibility;
  scroll-behavior:smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background ease-in-out .5s;
}

body::-webkit-scrollbar {
  width: 7px;
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #a1a1a1;
  border-radius: 5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #343434;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-bottom: .5rem;
    font-family: "Sorts Mill Goudy", Avenir, "Helvetica Neue", "Segoe UI", "Noto Serif SC", STSong, sans-serif;
    font-weight: 500;
    line-height: 1.2
}

.post-content {
  h1 { font-size: 2.75rem; }
  h2 { font-size: 2.2rem; }
  h3 { font-size: 1.925rem; }
  h4 { font-size: 1.65rem; }
  h5 { font-size: 1.375rem; }
  h6 { font-size: 1.1rem; }

  h2::before,
  h3::before,
  h4::before,
  h5::before,
  h6::before {
      position: absolute;
      margin-left: -3rem;
      opacity: .07;
      font-size: .8em;
      margin-top: .2em
  }

  h2:not(.p-article_user__name)::before {content: 'H2'}
  h3::before {content: "H3"}
  h4::before {content: "H4"}
  h5::before {content: "H5"}
  h6::before {content: "H6"}


  h2::after,
  h3::after,
  h4::after,
  h5::after,
  h6::after {
    content: "§";
    display: inline-block;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: .3;
    margin: 0 1rem
  }
}

p {
  margin-bottom: 1rem;

  &.font-medium {
    margin: 0 0 $line-height__medium;
  }

  &.font-small {
    margin: 0 0 $line-height__small;
  }

  &.font-tiny {
    margin: 0 0 $line-height__tiny;
  }

  @media #{$medium-down} {
    margin: 0 0 $line-height__medium;
  }
}

blockquote {
  margin: 0;
  padding-left: $line-height__small;
  font-style: italic;
  border-left: 3px solid $color__type;
}

hr {
  border: 0;
  height: 1px;
  background-color: $border-color;
  margin: 0 0 $line-height__base;

  @media #{$medium-down} {
    margin: 0 0 ($line-height__medium);
  }
}

ul,
ol {
  margin: 0 0 $line-height__base;

  ul, ol {
    margin: 0;
  }

  @media #{$medium-down} {
    margin: 0 0 $line-height__medium;
  }
}

a {
  color: var(--tag_a_color);
  transition: $base-transition-speed;

  &:visited {
    color: $color__type;
  }

  &:hover {
    color: $color__type--hover;
  }

  &:active {
    color: $color__type;
  }

  &.custom {
    text-decoration: none;
  }
}